<template>
    <h1 align="center">Corax 发版历史</h1>
  <div>
    <el-button
      style="float: right; margin-top: 15px; margin-right: 20px"
      type="primary"
      @click="getReleases()"
      >刷新</el-button
    >
    <el-button
      style="float: right; margin-top: 15px; margin-right: 20px"
      type="primary"
      plain
      @click="openDialog('add')"
      >添加数据</el-button
    >
    <el-table
      :data="releaseList"
      style="width: 100%; font-size: 15px"
      :fit="true"
      :show-header-border="true"
    >
      <el-table-column
        fixed
        prop="versionNo"
        label="版本号"
        align="center"
        sortable
      ></el-table-column>
      <el-table-column label="访问链接" align="center">
        <template v-slot="scope">
          <el-link :href="scope.row.accessLink" target="_blank">{{
            scope.row.accessLink
          }}</el-link>
        </template>
      </el-table-column>
      <el-table-column
        prop="username"
        label="管理账号"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="password"
        label="管理密码"
        align="center"
      ></el-table-column>
      <el-table-column prop="status" label="服务状态" align="center">
        <template v-slot="scope">
          <el-tag :type="scope.row.status === 1 ? 'success' : 'info'">
            {{ scope.row.status === 1 ? "在线" : "离线" }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column key="actions" label="操作" align="center">
        <template v-slot="scope">
          <el-button
            type="primary"
            size="mini"
            @click="openDialog('edit', scope.row)"
            >更新</el-button
          >
          <el-button type="danger" size="mini" @click="deleteRelease(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="dialogFormVisible" :title="dialogTitle" width="500">
      <el-form :model="form">
        <el-form-item label="版本号">
          <el-input v-model="form.versionNo" autocomplete="off" />
        </el-form-item>
        <el-form-item label="访问链接">
          <el-input v-model="form.accessLink" autocomplete="off" />
        </el-form-item>
        <el-form-item label="管理账号">
          <el-input v-model="form.username" autocomplete="off" />
        </el-form-item>
        <el-form-item label="管理密码">
          <el-input v-model="form.password" autocomplete="off" />
        </el-form-item>
        <el-form-item label="服务状态">
          <el-select v-model="form.status" placeholder="选择服务状态">
            <el-option label="在线" value="1" />
            <el-option label="离线" value="0" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeDialog">取消</el-button>
          <el-button type="primary" @click="submitForm">
            {{ dialogAction === "add" ? "添加" : "更新" }}
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import httpClient from "@/utils/request";
import common from "./common/Config";
import { ElMessage } from "element-plus";

export default {
  data() {
    return {
      releaseList: [],
      dialogFormVisible: false,
      dialogTitle: "",
      dialogAction: "",
      form: {
        versionNo: "",
        accessLink: "",
        username: "",
        password: "",
        status: "",
      },
      firstLoad: true,
    };
  },
  beforeMount() {
    this.getReleases();
  },
  methods: {
    openDialog(action, row = null) {
      this.dialogAction = action;
      if (action === "add") {
        this.dialogTitle = "添加release信息";
        this.form = {
          versionNo: "",
          accessLink: "",
          username: "",
          password: "",
          status: "",
        };
      } else if (action === "edit") {
        this.dialogTitle = "编辑release信息";
        this.form = { ...row };
        this.form.status = String(row.status)
      }
      this.dialogFormVisible = true;
    },

    closeDialog() {
      this.dialogFormVisible = false;
    },

    submitForm() {
      if (this.dialogAction === "add") {
        this.addRelease();
      } else if (this.dialogAction === "edit") {
        this.updateRelease();
      }
    },

    deleteRelease(row) {
      const releaseVersionNo = row.versionNo;
      const releaseIndex = this.releaseList.findIndex(
        (release) => release.versionNo === releaseVersionNo
      );

      if (releaseIndex !== -1) {
        this.$confirm("确认删除该条记录吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            httpClient
              .delete(
                common.releaseDelete.replace(":versionNo", releaseVersionNo)
              )
              .then(() => {
                this.$message.success("删除成功");
                this.releaseList.splice(releaseIndex, 1);
              })
              .catch(() => {
                this.$message.error("删除失败");
              });
          })
          .catch(() => {
            this.$message.info("取消删除操作");
          });
      } else {
        this.$message.error("未找到要删除的数据");
      }
    },

    addRelease() {
      this.form.status = parseInt(this.form.status, 10);
      httpClient
        .post(common.releaseCreate, this.form)
        .then(() => {
          ElMessage.success("添加成功");
          this.getReleases();
          this.closeDialog();
        })
        .catch(() => {
          ElMessage.error("添加失败");
        });
    },

    updateRelease() {
      this.form.status = parseInt(this.form.status, 10);
      httpClient
        .put(
          common.releaseUpdate.replace(":versionNo", this.form.versionNo),
          this.form
        )
        .then(() => {
          ElMessage.success("更新成功");
          this.getReleases();
          this.closeDialog();
        })
        .catch(() => {
          ElMessage.error("更新失败");
        });
    },

    getReleases() {
      httpClient
        .get(common.releaseList)
        .then((res) => {
          this.releaseList = res;
          if (!this.firstLoad){
            ElMessage.success("刷新成功");
          }
          this.firstLoad = false
        })
        .catch(() => {
          ElMessage.error("刷新失败");
        });
    },
  },
};
</script>
